<template>
  <div class="field-config">
    <div class="config-header">
      <h3>字段规则配置</h3>
      <el-button type="primary" size="small" @click="addField">
        <el-icon><Plus /></el-icon>
        添加字段
      </el-button>
    </div>
    
    <div class="config-content">
      <div class="table-container">
        <el-table 
          :data="fields" 
          style="width: 100%"
          max-height="500"
          border
        >
          <el-table-column prop="name" label="字段名" width="120">
            <template #default="{ row, $index }">
              <el-input
                v-model="row.name"
                size="small"
                @blur="updateField($index, row)"
              />
            </template>
          </el-table-column>
          
          <el-table-column prop="dataType" label="数据类型" width="120">
            <template #default="{ row, $index }">
              <el-select
                v-model="row.dataType"
                size="small"
                @change="updateField($index, row)"
              >
                <el-option label="BIGINT" value="BIGINT" />
                <el-option label="STRING" value="STRING" />
                <el-option label="ENUM" value="ENUM" />
                <el-option label="TIMESTAMP" value="TIMESTAMP" />
                <el-option label="DECIMAL" value="DECIMAL" />
                <el-option label="BOOLEAN" value="BOOLEAN" />
              </el-select>
            </template>
          </el-table-column>
          
          <el-table-column prop="length" label="长度" width="80">
            <template #default="{ row, $index }">
              <el-input
                v-model="row.length"
                size="small"
                type="number"
                @blur="updateField($index, row)"
                v-if="row.dataType !== 'TIMESTAMP' && row.dataType !== 'BIGINT'"
              />
              <span v-else>-</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="constraint" label="约束" min-width="180">
            <template #default="{ row, $index }">
              <el-input
                v-model="row.constraint"
                size="small"
                @blur="updateField($index, row)"
              />
            </template>
          </el-table-column>
          
          <el-table-column label="规则配置" width="100">
            <template #default="{ row, $index }">
              <el-button
                type="text"
                size="small"
                @click="configureField($index, row)"
              >
                <el-icon><Setting /></el-icon>
              </el-button>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="80">
            <template #default="{ $index }">
              <el-button
                type="text"
                size="small"
                @click="removeField($index)"
                style="color: #f56c6c"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 字段配置对话框 -->
    <el-dialog
      v-model="showConfigDialog"
      :title="`配置字段: ${currentField?.name || ''}`"
      width="500px"
    >
      <div v-if="currentField">
        <el-form label-width="100px">
          <el-form-item label="生成规则">
            <el-select v-model="fieldConfig.rule" placeholder="请选择生成规则">
              <el-option
                v-for="rule in getAvailableRules(currentField.dataType)"
                :key="rule.value"
                :label="rule.label"
                :value="rule.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item
            v-if="fieldConfig.rule === 'range'"
            label="数值范围"
          >
            <div style="display: flex; gap: 10px; align-items: center;">
              <el-input-number v-model="fieldConfig.min" placeholder="最小值" />
              <span>-</span>
              <el-input-number v-model="fieldConfig.max" placeholder="最大值" />
            </div>
          </el-form-item>
          
          <el-form-item
            v-if="fieldConfig.rule === 'enum'"
            label="枚举值"
          >
            <el-input
              v-model="fieldConfig.enumValues"
              type="textarea"
              placeholder="请输入枚举值，用逗号分隔"
              :rows="3"
            />
          </el-form-item>
          
          <el-form-item
            v-if="fieldConfig.rule === 'pattern'"
            label="正则模式"
          >
            <el-input
              v-model="fieldConfig.pattern"
              placeholder="请输入正则表达式"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showConfigDialog = false">取消</el-button>
          <el-button type="primary" @click="saveFieldConfig">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { Plus, Setting, Delete } from '@element-plus/icons-vue'

export default {
  name: 'FieldConfig',
  components: {
    Plus,
    Setting,
    Delete
  },
  setup() {
    const store = useStore()
    const showConfigDialog = ref(false)
    const currentField = ref(null)
    const currentFieldIndex = ref(-1)
    const fieldConfig = ref({
      rule: '',
      min: null,
      max: null,
      enumValues: '',
      pattern: ''
    })
    
    const fields = computed(() => store.state.fields)
    
    const ruleOptions = {
      BIGINT: [
        { label: '自增序列', value: 'sequence' },
        { label: '随机数值', value: 'random' },
        { label: '数值范围', value: 'range' }
      ],
      STRING: [
        { label: '随机字符串', value: 'random_string' },
        { label: '姓名生成', value: 'name' },
        { label: '邮箱生成', value: 'email' },
        { label: '正则模式', value: 'pattern' }
      ],
      ENUM: [
        { label: '枚举值', value: 'enum' }
      ],
      TIMESTAMP: [
        { label: '当前时间', value: 'current' },
        { label: '时间范围', value: 'range' },
        { label: '随机时间', value: 'random' }
      ],
      DECIMAL: [
        { label: '数值范围', value: 'range' },
        { label: '随机小数', value: 'random' }
      ],
      BOOLEAN: [
        { label: '随机布尔', value: 'random' },
        { label: '固定值', value: 'fixed' }
      ]
    }
    
    const getAvailableRules = (dataType) => {
      return ruleOptions[dataType] || []
    }
    
    const addField = () => {
      const newField = {
        id: Date.now(),
        name: `字段${fields.value.length + 1}`,
        dataType: 'STRING',
        length: 50,
        constraint: '',
        config: {}
      }
      store.dispatch('addField', newField)
    }
    
    const updateField = (index, field) => {
      store.dispatch('updateField', { index, field })
    }
    
    const removeField = (index) => {
      store.dispatch('removeField', index)
      ElMessage.success('字段已删除')
    }
    
    const configureField = (index, field) => {
      currentField.value = field
      currentFieldIndex.value = index
      fieldConfig.value = {
        rule: field.config?.rule || '',
        min: field.config?.min || null,
        max: field.config?.max || null,
        enumValues: field.config?.enumValues || '',
        pattern: field.config?.pattern || ''
      }
      showConfigDialog.value = true
    }
    
    const saveFieldConfig = () => {
      const updatedField = {
        ...currentField.value,
        config: { ...fieldConfig.value }
      }
      store.dispatch('updateField', {
        index: currentFieldIndex.value,
        field: updatedField
      })
      showConfigDialog.value = false
      ElMessage.success('字段配置已保存')
    }
    
    return {
      fields,
      showConfigDialog,
      currentField,
      fieldConfig,
      getAvailableRules,
      addField,
      updateField,
      removeField,
      configureField,
      saveFieldConfig
    }
  }
}
</script>

<style scoped>
.field-config {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.config-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.config-content {
  padding: 24px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-container {
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

:deep(.el-table) {
  font-size: 13px;
  height: 100%;
}

:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

:deep(.el-input--small) {
  --el-input-height: 28px;
}

:deep(.el-select--small) {
  --el-select-height: 28px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .field-config {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .config-content {
    padding: 16px;
  }
  
  .table-container {
    overflow-x: auto;
  }
  
  :deep(.el-table) {
    min-width: 700px;
  }
  
  .config-header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>